<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
	</head>
	<body>
		<!-- 元素的显示： 
		1.块元素block
			比较霸道，单独占一行
			默认的宽度和父级元素宽度的100%
			可以给盒子设置宽，高
			可以设置对齐属性
			可包含行内元素以及其他的块元素
			div,ul,ol,li,p,h1~h6
		2.行内元素inline
		一行显示多个
		默认的宽度就是内容的宽度
		宽，高属性无效
		不能设置对其属性
		行内元素包含文本或其他行内元素
		span,a,del,strong
		3.行内块元素inline-block
		一行显示多个，两个行内块元素之间有一定的空白间距
		默认的宽度就是内容的宽度
		可以给盒子设置宽，高
		input,ing,td
		元素显示模式的转换：
		display:模式的名称；
			-->
			<div class="box">hello box</div>
			<p class="box">hello 段落</p>
			<h1 class="box">一级标题</h1>
			<span>hello span</span>
			<del class="box">hello 删除线</del>
			<style type="text/css">
				div{
					background-color: aqua;
					width: 100px;
					height: 40px;
				}
				p{
					background-color: aquamarine;
				}
				h1{
					background-color: beige;
				}
				span{
					background-color: blanchedalmond;
				}
				del{
					background-color: aquamarine;
				}
				.box{
					width:300px;
					height:200px;
					border:2px solid blue;
					margin: auto;
					text-align: center;
				}
			</style>
	</body>
</html>
